<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <div class="filter_container">
         <el-tabs v-model="queryParams.proveStatus" type="card" @tab-click="handleQuery">

           <el-tab-pane name="NEW">
             <span slot="label"><i class="el-icon-bank-card" /> 待审核</span>
           </el-tab-pane>
          <el-tab-pane name="prove">
             <span slot="label"><i class="el-icon-bank-card" /> 审核通过</span>
           </el-tab-pane>
           <el-tab-pane name="reject">
              <span slot="label"><i class="el-icon-bank-card" /> 审核不通过</span>
            </el-tab-pane>
           </el-tabs>
           </div>
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="客户编码:">
        <el-input v-model="queryParams.customerCode" size="small" placeholder="请输入客户编码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="客户名称:">
        <el-input v-model="queryParams.customerName" size="small" placeholder="请输入客户名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">

     <!-- <el-col :span="1.5">
        <el-button v-hasPermission="['basic:customer:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col> -->
     <!-- <el-col :span="1.5">
        <el-button v-hasPermission="['basic:customer:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button v-if="queryParams.proveStatus === `NEW`" v-hasPermission="['basic:customer:prove']" type="primary" icon="el-icon-edit" size="mini" :disabled="isMultiple" @click="handleProve">审核</el-button>
      </el-col>
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="查看-审核" align="center" show-overflow-tooltip sortable width="130">
      <template slot-scope="scope">
        <el-button type="text" @click="handleView(scope.row)">{{ scope.row.customerCode }}</el-button>
      </template>
       </el-table-column>

      <el-table-column label="客户名称" width="188" align="center" prop="customerName" />
      <!-- <el-table-column label="商城类型" align="center" prop="customerType">
        <template slot-scope="scope">
          <span>{{ customerTypeFormat(scope.row) }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="营业执照号" width="125" align="center" show-overflow-tooltip prop="bizLicenceNo" />
      <el-table-column label="开户银行" width="165" align="center" prop="bankName" />
      <el-table-column label="银行账户" width="165" align="center" show-overflow-tooltip prop="bankAccount" />
      <el-table-column label="联系人姓名" align="center" prop="contactName" />
      <el-table-column label="联系人电话" width="125" align="center" show-overflow-tooltip prop="contactPhone" />
      <el-table-column label="联系人邮件" align="center" prop="contactEmail" />
      <el-table-column label="企业名称" width="165" align="center" prop="companyName" />
      <el-table-column label="联系人" width="165" align="center" prop="contactWechatId" />
      <el-table-column label="网址" width="165" align="center" prop="webSite" />
      <el-table-column label="微信号" width="125" show-overflow-tooltip align="center" prop="wechatId" />
      <el-table-column label="入驻时间" align="center" prop="enrollDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.enrollDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开业时间" align="center" prop="openDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.openDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermission="['basic:customer:update']" size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
       <!--   <el-button v-hasPermission="['basic:customer:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
       --> </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 添加/修改对话框 -->
    <el-dialog :title="customerFormDialog.title" :visible.sync="customerFormDialog.visible" :close-on-click-modal="false" width="580px" append-to-body>
      <el-form ref="customerForm" :model="customerFormData" :rules="customerFormRules" label-width="100px">
       <el-row :gutter="22" class="form-item-group">
       <el-col :span="11">
        <el-form-item label="客户编码" prop="customerCode">
          <el-input v-model="customerFormData.customerCode" placeholder="请输入商城编码" @change="handleCheckCode" />
        </el-form-item>
        </el-col>
        <el-col :span="11">
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="customerFormData.customerName" placeholder="请输入商城名称" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
          <el-col :span="11">
       <!-- <el-form-item label="商城类型" prop="customerType">
          <el-select v-model="customerFormData.customerType" style="width: 440px" clearable placeholder="请选择客户类型">
            <el-option v-for="option in options.customerTypeOptions" :key="option.dictValueCode" :label="option.dictValueName" :value="option.dictValueCode" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="营业执照号" prop="bizLicenceNo">
          <el-input v-model="customerFormData.bizLicenceNo" placeholder="请输入营业执照号" />
        </el-form-item>
        </el-col>
        <el-col :span="11">
        <el-form-item label="开户银行" prop="bankName">
          <el-input v-model="customerFormData.bankName" placeholder="请输入开户银行" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
          <el-col :span="11">
        <el-form-item label="银行账户" prop="bankAccount">
         <el-input v-model="customerFormData.bankAccount" placeholder="请输入银行账户" />
        </el-form-item>
        </el-col>
        <el-col :span="11">
       <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="customerFormData.contactName" placeholder="请输入联系人姓名" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
           <el-col :span="11">
        <el-form-item label="联系人电话" prop="contactPhone">
          <el-input v-model="customerFormData.contactPhone" placeholder="请输入联系人电话" />
        </el-form-item>
        </el-col>
        <el-col :span="11">
        <el-form-item label="联系人邮件" prop="contactEmail">
          <el-input v-model="customerFormData.contactEmail" placeholder="请输入联系人邮件" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
          <el-col :span="22">
        <el-form-item label="开业时间：" prop="openDate">
          <el-date-picker
            v-model="customerFormData.openDate"
            type="date"
            placeholder="开业时间"
          />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
        <el-col :span="22">
        <el-form-item label="入驻时间：" prop="enrollDate">
          <el-date-picker
            v-model="customerFormData.enrollDate"
            type="date"
            placeholder="入驻时间"
          />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
          <el-col :span="11">
       <el-form-item label="微信号" prop="wechatId">
         <el-input v-model="customerFormData.wechatId" placeholder="微信号" />
        </el-form-item>
        </el-col>
        <el-col :span="11">
        <el-form-item label="联系人微信号" prop="contactWechatId">
         <el-input v-model="customerFormData.contactWechatId" placeholder="联系人微信号" />
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="22" class="form-item-group">
          <el-col :span="11">
       <el-form-item label="网站地址" prop="webSite">
        <el-input v-model="customerFormData.webSite" placeholder="网站地址" />
       </el-form-item>
       </el-col>
       <el-col :span="11">
        <el-form-item label="所属企业名称" prop="companyName">
          <el-input v-model="customerFormData.companyName" placeholder="所属企业名称" />
        </el-form-item>
        </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmCustomerFormDialog">确 定</el-button>
        <el-button @click="resetCustomerFormDialog">取 消</el-button>
      </div>
    </el-dialog>

    <div class="dialog_container">
      <!--复核-->
      <el-dialog
        :title="proveDialog.title"
        :close-on-click-modal="false"
        :before-close="closeProveDialog"
        :visible.sync="proveDialog.visible"
        width="35%"
      >
        <el-form :model="proveDialogData" label-position="right" label-width="120px" class="dialog_form">
          <el-form-item label="审核结果：">
            <el-select v-model="proveDialogData.proveStatus" placeholder="请选择" clearable size="mini">
              <el-option v-for="option in  options.proveOptions" :key="option.key" :label="option.label" :value="option.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核备注：">
            <el-input v-model="proveDialogData.remark" />

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeProveDialog()">取消</el-button>
          <el-button type="primary" @click="confirmProveDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import CustomerApi from '@/api/basic/CustomerApi'
import DictValueApi from '@/api/system/DictValueApi'
import RegionApi from '@/api/system/RegionApi'
 import appConstant from '@/constant/AppConstant'
const defaultCustomerFormData = {
  customerCode: null,
  customerName: null,
  customerFullName: null,
  customerType: null,
  bizLicenceNo: null,
  bankAccount: null,
  bankName: null,
  customerDesc: null,
  contactName: null,
  contactPhone: null,
  contactEmail: null,
  province: null,
  city: null,
  district: null,
  address: null
}
export default {
  name: 'CustomerProveList',
  data() {
    return {
      options: {
        customerTypeOptions: [], // 客户类型字典
       proveOptions: appConstant.proveList,
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
        customerCode: null,
        proveStatus: null,
        customerName: null,
        customerType: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      proveDialogData: {
       proveStatus: null,
        remark: null,
       ids: null
      },
      proveDialog: {
        title: '审核',
        visible: false
      },
      customerFormDialog: {
        title: '',
        visible: false
      },
      customerFormData: Object.assign({}, defaultCustomerFormData),
      customerFormRules: {
        customerCode: [{ required: true, message: '客户编码不能为空', trigger: 'blur' }],
        customerName: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }]
      },
      selectedRegion: [],
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  watch: {
    selectedRegion(val, oldVal) {
      if (val != null) {
        this.customerFormData.province = val[0]
        this.customerFormData.city = val[1]
        this.customerFormData.district = val[2]
      } else {
        this.customerFormData.province = null
        this.customerFormData.city = null
        this.customerFormData.district = null
      }
    }
  },
  created() {
    this.handleinitQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      DictValueApi.list({ dictCode: 'bms_customer_type' }).then(response => {
        this.options.customerTypeOptions = response.data
      })
      RegionApi.tree().then(response => {
        this.options.regionOptions = this.$common.list2Tree(response.data)
      })
    },
    handleAdd() {
      this.openCustomerFormDialog()
    },
    handleView(row) {
      this.$router.push({ path: `/customer/customerProveView/${row.id}` })
    },
    handleLogicalDelete(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认作废数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return CustomerApi.logicalDelete(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('作废成功')
      })
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return CustomerApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openCustomerFormDialog(id)
    },
    handleinitQuery() {
      this.loading = true
      this.queryParams.proveStatus = "NEW"
      CustomerApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleQuery() {
      this.loading = true

      CustomerApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleCheckCode() {
      const params = {
        id: this.customerFormData.id,
        customerCode: this.customerFormData.customerCode
      }
      CustomerApi.checkCode(params).then(response => {
        if (!response.data) {
          this.$message.error('商城编码重复')
        }
      })
    },
    handleExport() {
      let that = this
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return CustomerApi.exportData(that.queryParams)
      }).then(response => {
        this.$common.download(response.data)
      })
    },
    handleProve(row) {
       const ids = row.id || this.multipleSelection.map(item => item.id)
         this.proveDialog.visible = true
         this.proveDialogData.ids = ids
    },
    closeProveDialog() {
      this.proveDialog = {
        title: '审核',
        visible: false
      }
      this.proveDialogData = {
        proveStatus: null
      }
       this.handleQuery()
    },
    confirmProveDialog() {
        const params = {
          proveStatus: this.proveDialogData.proveStatus,
          remark: this.proveDialogData.remark,
          ids: this.proveDialogData.ids
       }
        CustomerApi.prove(params).then(() => {
          this.$message.success('审核成功!')
          this.closeProveDialog()
        })
        this.handleQuery()
    },
    openCustomerFormDialog(id) {
      this.resetCustomerFormDialog()
      this.customerFormDialog.visible = true
      if (id) {
        this.customerFormDialog.title = '客户-修改'
        CustomerApi.get(id).then(response => {
          this.customerFormData = {
            ...this.customerFormData,
            ...response.data
          }
          // 显示省市区
          this.selectedRegion = [
            this.customerFormData.province,
            this.customerFormData.city,
            this.customerFormData.district
          ]
        })
      } else {
        this.customerFormDialog.title = '客户-添加'
      }
    },
    confirmCustomerFormDialog() {
      this.$refs['customerForm'].validate(valid => {
        if (valid) {
          if (this.customerFormData.id) {
            CustomerApi.edit(this.customerFormData).then(response => {
              this.$message.success('修改成功')
              this.customerFormDialog.visible = false
              this.handleQuery()
            })
          } else {
            CustomerApi.add(this.customerFormData).then(response => {
              this.$message.success('添加成功')
              this.customerFormDialog.visible = false
              this.handleQuery()
            })
          }
        }
      })
    },
    resetCustomerFormDialog() {
      this.customerFormDialog = {
        title: '',
        visible: false
      }
      this.customerFormData = Object.assign({}, defaultCustomerFormData)
      this.selectedRegion = []
      this.resetForm('customerForm')
    },
    // 客户类型字典
    customerTypeFormat(row) {
      return this.$common.getDictValueName(this.options.customerTypeOptions, row.customerType)
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.queryParams = {
        customerCode: null,
        customerName: null,
        customerType: null,
        isValid: this.$constant.Y
      }
      this.handleQuery()
    }
  }
}
</script>
